import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaNewScroll, WeaAlertPage, WeaTools, WeaLocaleProvider } from 'ecCom';
import { Pagination, Spin } from 'antd';
import ReplyItem from './item/';

const getLabel = WeaLocaleProvider.getLabel;
const { viewer } = WeaTools;

@inject('coworkMainStore')
@observer
class CoworkRelateMeList extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { coworkMainStore } = this.props;
    coworkMainStore.chooseCowork('');
    coworkMainStore.queryRelateMeList();
  }

  componentWillReceiveProps() {
    this.setContent();
  }

  componentDidUpdate() {
    this.setContent();
  }

  componentWillUnmount() {
    const { coworkMainStore: { setContentParams } } = this.props;
    setContentParams({ page: {
      current: 1,
      total: 0,
      pageSize: 20,
    } });
  }

  onImgs = (arr) => {
    Array.from(arr).forEach((img) => {
      img.onload = () => {
        img.setAttribute('data-imgsrc', img.src);
        img.setAttribute('class', 'formImgPlay');
        img.onclick = viewer;
      };
    });
  }

  setContent = () => {
    let content_img = document.querySelectorAll('.cowork-reply-remark img'); // 详情内容中的img
    this.onImgs(content_img);
  }

  render() {
    const { coworkMainStore } = this.props;
    let { content } = coworkMainStore;
    content = toJS(content);
    let { relateMeList = [], replyListViewRight = 0, page, relateLoading } = content;
    return (
      <div className="wea-cowork-content">
        <div className="wea-cowork-relate">
          <p className="wea-cowork-alert">{getLabel(382628, '最近一周被提到的留言')}</p>
          <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@8a8sds`}>
            {relateLoading ?
              <div style={{ height: 300 }}><div className="top40 align-center" style={{ position: 'relative' }}><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@xe1jhg`} /></div></div> :
              replyListViewRight != 1 ? <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@2dp51h`} style={{ height: 200, position: 'relative', paddingTop: '50px' }}>
                <div>{getLabel(382663, '暂无权限')}</div>
              </WeaAlertPage> :
              (relateMeList && relateMeList.length > 0) ?
                <div className="wea-cowork-reply-list">
                  {relateMeList.map((record, index) => <ReplyItem ecId={`${this && this.props && this.props.ecId || ''}_ReplyItem@dd9n16@${record.id || index}`} operate={this.operate} {...record} hasCoworkHref={true} />)}
                </div>
                 : (
                <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@2na8mh`} icon="icon-coms-blank">
                  <div>{getLabel(83553, '暂无数据')}</div>
                </WeaAlertPage>
              )
            }
          </WeaNewScroll>
          <div className="fixPagination">
            <Pagination ecId={`${this && this.props && this.props.ecId || ''}_Pagination@pd7inv`} {...page} showQuickJumper={true} onChange={this.changePage} />
          </div>
        </div>
      </div>
    );
  }
  changePage = (current) => {
    const { coworkMainStore } = this.props;
    coworkMainStore.queryRelateMePage(current);
  }

  operate = (params) => {
    const { coworkMainStore } = this.props;
    coworkMainStore.operateDicsuss(params, 'my');
  }
}

export default CoworkRelateMeList;
